@page "/layout"
<style>
    .example-tabs .rz-layout {
        height: 300px;
    }
</style>
<RadzenText TextStyle="TextStyle.H2" TagName="TagName.H1" class="rz-pt-8">
    Layout
</RadzenText>
<RadzenText TextStyle="TextStyle.Subtitle1" class="rz-pb-4">
    <strong>RadzenLayout</strong> allows you to define the global layout of your application (usually used in MainLayout.razor).
    It has header, sidebar, body and footer sections which correspond to the <code>RadzenHeader</code>, <code>RadzenSidebar</code>, <code>RadzenBody</code> and <code>RadzenFooter</code> components.
    Sections are optional and can be omitted.
</RadzenText>

<RadzenText Anchor="layout#sidebar-header-footer" TextStyle="TextStyle.H5" TagName="TagName.H2" class="rz-pt-8 rz-mb-6">
    Sidebar, Header and Footer
</RadzenText>
<RadzenExample ComponentName="Layout" Example="LayoutSidebarHeaderFooter" Documentation="false" Heading="false" Source="https://github.com/radzenhq/radzen-blazor/blob/master/Radzen.Blazor/RadzenLayout.cs">
    <LayoutSidebarHeaderFooter />
</RadzenExample>

<RadzenText Anchor="layout#full-height-sidebar" TextStyle="TextStyle.H5" TagName="TagName.H2" class="rz-pt-12 rz-mb-6">
    Full height Sidebar
</RadzenText>
<RadzenExample ComponentName="Layout" Example="LayoutFullHeightSidebar" Documentation="false" Heading="false" Source="https://github.com/radzenhq/radzen-blazor/blob/master/Radzen.Blazor/RadzenLayout.cs">
    <LayoutFullHeightSidebar />
</RadzenExample>

<RadzenText Anchor="layout#overlay" TextStyle="TextStyle.H5" TagName="TagName.H2" class="rz-pt-12 rz-mb-6">
    Overlay Sidebar
</RadzenText>
<RadzenExample ComponentName="Layout" Example="LayoutSidebarOverlay" Documentation="false" Heading="false" Source="https://github.com/radzenhq/radzen-blazor/blob/master/Radzen.Blazor/RadzenLayout.cs">
    <LayoutSidebarOverlay />
</RadzenExample>

<RadzenText Anchor="layout#overlay-full" TextStyle="TextStyle.H5" TagName="TagName.H2" class="rz-pt-12 rz-mb-6">
    Full height overlay Sidebar
</RadzenText>
<RadzenExample ComponentName="Layout" Example="LayoutSidebarFullHeightOverlay" Documentation="false" Heading="false" Source="https://github.com/radzenhq/radzen-blazor/blob/master/Radzen.Blazor/RadzenLayout.cs">
    <LayoutSidebarFullHeightOverlay />
</RadzenExample>

<RadzenText Anchor="layout#right-sidebar" TextStyle="TextStyle.H5" TagName="TagName.H2" class="rz-pt-12 rz-mb-6">
    Right Sidebar
</RadzenText>
<RadzenExample ComponentName="Layout" Example="LayoutRightSidebar" Documentation="false" Heading="false" Source="https://github.com/radzenhq/radzen-blazor/blob/master/Radzen.Blazor/RadzenLayout.cs">
    <LayoutRightSidebar />
</RadzenExample>

<RadzenText Anchor="layout#right-full-height-sidebar" TextStyle="TextStyle.H5" TagName="TagName.H2" class="rz-pt-12 rz-mb-6">
    Right full height Sidebar
</RadzenText>
<RadzenExample ComponentName="Layout" Example="LayoutRightFullHeightSidebar" Documentation="false" Heading="false" Source="https://github.com/radzenhq/radzen-blazor/blob/master/Radzen.Blazor/RadzenLayout.cs">
    <LayoutRightFullHeightSidebar />
</RadzenExample>

<RadzenText Anchor="layout#right-left-sidebar" TextStyle="TextStyle.H5" TagName="TagName.H2" class="rz-pt-12 rz-mb-6">
    Right and Left Sidebar
</RadzenText>
<RadzenExample ComponentName="Layout" Example="LayoutRightLeftSidebar" Documentation="false" Heading="false" Source="https://github.com/radzenhq/radzen-blazor/blob/master/Radzen.Blazor/RadzenLayout.cs">
    <LayoutRightLeftSidebar />
</RadzenExample>

<RadzenText Anchor="layout#icon-sidebar" TextStyle="TextStyle.H5" TagName="TagName.H2" class="rz-pt-12 rz-mb-6">
    Icon Sidebar
</RadzenText>
<RadzenExample ComponentName="Layout" Example="LayoutIconSidebar" Documentation="false" Heading="false" Source="https://github.com/radzenhq/radzen-blazor/blob/master/Radzen.Blazor/RadzenLayout.cs">
    <LayoutIconSidebar />
</RadzenExample>